<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>管控</BreadcrumbItem>
      <BreadcrumbItem>药品管控</BreadcrumbItem>
      <BreadcrumbItem>药品目录</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">药品目录</h2>
  </div>

  <div class="info">
    <div class="left">
      <Collapse v-model="value" style="width: 220px">
        <Panel name="1">
          药品品种
          <template #content> 
            <div>发散风热药</div>
            <div>感冒药</div>
              </template>
        </Panel>
      </Collapse>
    </div>

    <div class="right">
      <Tabs :animated="false" style="padding-left: 15px">
        <TabPane label="药品">
          <div class="right1">
            <vxe-grid v-bind="gridOptions1" style="">
              <template #toolbar_buttons>
                <div class="info1">
                  <vxe-input
                    v-model="searchName"
                    placeholder="请输入药品名称、编码"
                    style="width: 280px"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>
              </template>
            </vxe-grid>
          </div>
        </TabPane>
        
        <TabPane label="规格"> 
          <vxe-grid v-bind="gridOptions2" style="">
            <template #toolbar_buttons>
              <div class="info1">
                <vxe-input
                  v-model="searchName"
                  placeholder="请输入规格名称、编码"
                  style="width: 280px"
                ></vxe-input>
                <vxe-button status="primary">搜索</vxe-button>
              </div>
            </template>
          </vxe-grid>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script setup>
import {  reactive } from "vue";

const findList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const list = [
        {
          id: 1,
          name: "中药库房",
          dizhi: "T1",
          mianji: "Develop",
          fuzeren: "Man",
          guanliren: 28,
          beizhu: "Shenzhen",
          caozuo: "1",
        },
      ];
      const rest = {
        page: {
          total: 200,
        },
        result: list,
      };
      resolve(rest);
    }, 500);
  });
};

const gridOptions1 = reactive({
  border: true,
  showOverflow: true,
  showFooter: true,

  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    perfect: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      // 自定义插槽模板
      buttons: "toolbar_buttons",
    },
  },
  proxyConfig: {
    props: {
      result: "result",
      total: "page.total", // 配置响应结果总页数字段
    },
    ajax: {
      query: () => findList(),
    },
  },
  columns: [
    { field: "id", title: "序号" , width: 70,align: "center" },
    { field: "name", title: "药品编码" , width: 100 },
    { field: "dizhi", title: "药品名称" , width: 100 },
    { field: "mianji", title: "剂量单位" , width: 140 },
    { field: "fuzeren", title: "剂型" ,  },
    { field: "guanliren", title: "毒理" , width: 140 },
    { field: "beizhu", title: "货源" , width: 140 },
    { field: "caozuo", title: "价值" ,  },
    { field: "caozuo", title: "梯次" ,  },
    { field: "caozuo", title: "原料药" },
    { field: "caozuo", title: "急救药" },
    { field: "caozuo", title: "操作" , width: 140 },
  ],
});

const gridOptions2 = reactive({
  border: true,
  showOverflow: true,
  

  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    perfect: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      // 自定义插槽模板
      buttons: "toolbar_buttons",
    },
  },
  proxyConfig: {
    props: {
      result: "result",
      total: "page.total", // 配置响应结果总页数字段
    },
    ajax: {
      query: () => findList(),
    },
  },
  columns: [
    { field: "id", title: "序号", width: 140 },
    { field: "name", title: "规格编码" },
    { field: "dizhi", title: "药品规格" },
    { field: "mianji", title: "申领单位" },
    { field: "fuzeren", title: "生产商" },
    { field: "guanliren", title: "数字码" },
    { field: "beizhu", title: "DDD值" },
    { field: "caozuo", title: "操作" },
  ],
});
</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  display: flex;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}

.primary {
  color: #945635;
}
h2 {
  font-weight: normal;
  font-size: 20px;
}
.left {
  float: left;
  background-color: #f5f7f9;
}
.right {
  width: 100%;
}
</style>
